import { Popconfirm, Spin, message } from 'antd';
import { useState, useEffect } from 'react';
import Pagination from '@/pages/pc/components/Pagination';
import classNames from 'classnames';
import styles from './index.less';
import { allGet } from '@/services/pc';
import numeral from 'numeral';
import Empty from '../components/Empty';
import useBuy from '@/hooks/useBuy';
import { history, useModel } from 'umi';

const sleep = (t) => new Promise((reslove) => setTimeout(reslove, t));

const Index = () => {
  const { order, getOrder, loading } = useModel('order');

  // const [total, setTotal] = useState(100);
  // const [currentPage, setCurrentPage] = useState(1);

  const init = async () => {
    getOrder();
  };
  useEffect(() => {
    init();
  }, []);

  const handleCancelOrder = async (id, type) => {
    if (type === 'course') {
      const response = await allGet({
        params: { mod: 'enroll', do: 'delete', version: 'pc1.0', classid: id },
      });
      if (response.success) {
        message.success('删除成功');
        getOrder();
      }
    } else {
      const response = await allGet({
        params: { mod: 'salesmix', do: 'deleteorder', version: 'pc1.0', sid: id },
      });

      if (response.success) {
        message.success('删除成功');
        getOrder();
      }
    }
  };
  // const handleDeleteOrder = async (id) => {
  //   await sleep(2000);
  // }

  const { packagesBuy, courseBuy } = useBuy();

  const handlePayCourse = (classid) => {
    courseBuy({ classid });
  };
  const renderPackages = (item) => {
    const data = item.data || {};
    const courses = data?.courses || [];
    const isPayed = Number(data?.status) > 0;
    return (
      <div className={styles.item} key={item.id}>
        <div className={styles.header}>
          <div className={styles.left}>
            <div className={styles.field}>
              <div className={styles.key}>订单号：</div>
              <div className={styles.value}>{item.orderno}</div>
            </div>
            <div className={styles.field}>
              <div className={styles.key}>下单时间：</div>
              <div className={styles.value}>{item.dateline}</div>
            </div>
          </div>
          {/* <div className={styles.right}>
          <div className={styles.info}>
          </div>
          <div className={styles.handles}>
            <Popconfirm
              title="删除后不可恢复, 确定删除?"
              onConfirm={() => handleDeleteOrder(1)}

              okText="确定"
              cancelText="关闭"
            >
              <div className={styles.delete}>
                <i className={styles.icon}></i> 删除订单
              </div>
            </Popconfirm>
          </div>
        </div> */}
        </div>

        <div className={styles.body}>
          <div className={styles.left}>
            {courses.map((item) => {
              return (
                <div className={styles.infoWrapper} key={item.scid}>
                  <div
                    className={styles.img}
                    style={{ backgroundImage: `url(${item.pic})` }}
                    onClick={() => history.push(`/center/courses/detail/${item?.classid}`)}
                  />
                  <div className={styles.info}>
                    <div
                      className={styles.title}
                      onClick={() => history.push(`/center/courses/detail/${item?.classid}`)}
                    >
                      {item.name}
                    </div>
                    <div className={styles.des}>
                      <div className={styles.field}>正式课：{item.lessonnum}节</div>
                      <div className={styles.field}>追加课：{item.addlessonnum}节</div>
                    </div>
                    <div className={styles.money}>¥{item.price}</div>
                  </div>
                </div>
              );
            })}
          </div>
          <div className={styles.lineWrapper}>
            <i className={styles.line} />
          </div>
          <div className={styles.right}>
            <div className={styles.moneys}>
              <div className={styles.text}>合计：¥{data?.price}</div>
              {isPayed && (
                <div className={classNames(styles.text, styles.strong)}>实付：¥{data?.payed}</div>
              )}
            </div>
            <div className={styles.handles}>
              {isPayed ? (
                <div className={classNames(styles.status, styles.success)}>
                  <i className={styles.icon}></i> 已完成
                </div>
              ) : (
                <div className={styles.pay} onClick={() => packagesBuy({ sid: item?.data?.sid })}>
                  去支付
                </div>
              )}
              {!isPayed && (
                <div
                  className={styles.cancel}
                  onClick={() => handleCancelOrder(item.data?.sid, 'package')}
                >
                  删除订单
                </div>
              )}
              {/* {!isPayed && <Popconfirm
              title="确定取消?"
              onConfirm={() => handleCancelOrder(1)}

              okText="确定"
              cancelText="关闭"
            >
              <div className={styles.cancel}>删除订单</div>
            </Popconfirm>} */}
            </div>
          </div>
        </div>
      </div>
    );
  };
  const renderCourse = (item) => {
    const data = item.data || {};
    const isPayed = Number(data?.status) > 0;
    return (
      <div className={styles.item} key={item.id}>
        <div className={styles.header}>
          <div className={styles.left}>
            <div className={styles.field}>
              <div className={styles.key}>订单号：</div>
              <div className={styles.value}>{item.orderno}</div>
            </div>
            <div className={styles.field}>
              <div className={styles.key}>下单时间：</div>
              <div className={styles.value}>{item.dateline}</div>
            </div>
          </div>
          {/* <div className={styles.right}>
          <div className={styles.info}>
          </div>
          <div className={styles.handles}>
            <Popconfirm
              title="删除后不可恢复, 确定删除?"
              onConfirm={() => handleDeleteOrder(1)}

              okText="确定"
              cancelText="关闭"
            >
              <div className={styles.delete}>
                <i className={styles.icon}></i> 删除订单
              </div>
            </Popconfirm>
          </div>
        </div> */}
        </div>
        <div className={styles.body}>
          <div className={styles.left}>
            <div className={styles.infoWrapper}>
              <div
                className={styles.img}
                style={{ backgroundImage: `url(${item?.data?.pic})` }}
                onClick={() => history.push(`/center/courses/detail/${item?.data?.classid}`)}
              />
              <div className={styles.info}>
                <div
                  className={styles.title}
                  onClick={() => history.push(`/center/courses/detail/${item?.data?.classid}`)}
                >
                  {item?.data?.classname}
                </div>
                <div className={styles.des}>
                  <div className={styles.field}>正式课：{item?.data?.lessonnum}节</div>
                  <div className={styles.field}>追加课：{item?.data?.addlessonnum}节</div>
                </div>
                <div className={styles.money}>¥{item?.data?.price}</div>
              </div>
            </div>
          </div>
          <div className={styles.lineWrapper}>
            <i className={styles.line} />
          </div>
          <div className={styles.right}>
            <div className={styles.moneys}>
              <div className={styles.text}>合计：¥{item?.data?.price}</div>
              <div className={styles.text}>
                已优惠：-¥
                {item.data?.price
                  ? numeral(item.data?.price).subtract(item?.data?.pay).format()
                  : 0}
              </div>
              <div className={classNames(styles.text, styles.strong)}>实付：¥{item?.data?.pay}</div>
            </div>
            <div className={styles.handles}>
              {isPayed ? (
                <div className={classNames(styles.status, styles.success)}>
                  <i className={styles.icon}></i> 已完成
                </div>
              ) : (
                <div className={styles.pay} onClick={() => handlePayCourse(item?.data?.classid)}>
                  去支付
                </div>
              )}
              {!isPayed && (
                <div
                  className={styles.cancel}
                  onClick={() => handleCancelOrder(item?.data?.classid, 'course')}
                >
                  删除订单
                </div>
              )}

              {/* {!isPayed && <Popconfirm
              title="确定取消?"
              onConfirm={() => handleCancelOrder(1)}

              okText="确定"
              cancelText="关闭"
            >
              <div className={styles.cancel}>删除订单</div>
            </Popconfirm>
            } */}
            </div>
          </div>
        </div>
      </div>
    );
  };
  console.log(order, 'order');
  return (
    <div className={styles.page}>
      <Spin spinning={loading}>
        <h2 className={styles.h2}>购买记录</h2>
        <div className={styles.list}>
          {order?.list?.length > 0 ? (
            order?.list?.map?.((item) => {
              return item.type === 'course' ? renderCourse(item) : renderPackages(item);
            })
          ) : (
            <Empty style={{ margin: '100px auto 0 auto' }} />
          )}
        </div>

        {/* <div className={styles.list}>
        <div className={styles.item}>
          <div className={styles.header}>
            <div className={styles.field}>
              <div className={styles.key}>订单号：</div>
              <div className={styles.value}>8020210528165621qa098w</div>
            </div>
            <div className={styles.field}>
              <div className={styles.key}>下单时间：</div>
              <div className={styles.value}>2021-01-11 12:30:21</div>
            </div>
          </div>
          <div className={styles.body}>
            <div className={styles.left}>
              <div className={styles.infoWrapper}>
                <div className={styles.img} style={{ backgroundImage: "url(https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg)" }} />
                <div className={styles.info}>
                  <div className={styles.title}>Unity3d手绘特效与二次元（限时特惠）</div>
                  <div className={styles.des}>
                    <div className={styles.field}>正式课：50节</div>
                    <div className={styles.field}>追加课：2节</div></div>
                  <div className={styles.money}>¥6688</div>
                </div>
              </div>
            </div>
            <div className={styles.lineWrapper}>
              <i className={styles.line} />
            </div>
            <div className={styles.right}>

              <div className={styles.moneys}>
                <div className={styles.text}>合计：¥6688</div>
                <div className={styles.text}>优惠券：-¥100</div>
                <div className={classNames(styles.text, styles.strong)}>实付：¥6588</div>
              </div>
              <div className={styles.handles}>
                <div className={classNames(styles.status, styles.success)}><i className={styles.icon}></i> 已完成</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.list}>
        <div className={styles.item}>
          <div className={styles.header}>
            <div className={styles.left}>
              <div className={styles.field}>
                <div className={styles.key}>订单号：</div>
                <div className={styles.value}>8020210528165621qa098w</div>
              </div>
              <div className={styles.field}>
                <div className={styles.key}>下单时间：</div>
                <div className={styles.value}>2021-01-11 12:30:21</div>
              </div>
            </div>
            <div className={styles.right}>
              <div className={styles.info}>

              </div>
              <div className={styles.handles}>
                <Popconfirm
                  title="删除后不可恢复, 确定删除?"
                  onConfirm={() => handleDeleteOrder(1)}

                  okText="确定"
                  cancelText="关闭"
                >
                  <div className={styles.delete}>
                    <i className={styles.icon}></i> 删除订单
                  </div>
                </Popconfirm>
              </div>

            </div>
          </div>
          <div className={styles.body}>
            <div className={styles.left}>
              <div className={styles.infoWrapper}>
                <div className={styles.img} style={{ backgroundImage: "url(https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg)" }} />
                <div className={styles.info}>
                  <div className={styles.title}>Unity3d手绘特效与二次元（限时特惠）</div>
                  <div className={styles.des}>
                    <div className={styles.field}>正式课：50节</div>
                    <div className={styles.field}>追加课：2节</div></div>
                  <div className={styles.money}>¥6688</div>
                </div>
              </div>
              <div className={styles.infoWrapper}>
                <div className={styles.img} style={{ backgroundImage: "url(https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg)" }} />
                <div className={styles.info}>
                  <div className={styles.title}>Unity3d手绘特效与二次元（限时特惠）</div>
                  <div className={styles.des}>
                    <div className={styles.field}>正式课：50节</div>
                    <div className={styles.field}>追加课：2节</div></div>
                  <div className={styles.money}>¥6688</div>
                </div>
              </div>
            </div>
            <div className={styles.lineWrapper}>
              <i className={styles.line} />
            </div>
            <div className={styles.right}>

              <div className={styles.moneys}>
                <div className={styles.text}>合计：¥6688</div>
                <div className={styles.text}>优惠券：-¥100</div>
                <div className={classNames(styles.text, styles.strong)}>实付：¥6588</div>
              </div>
              <div className={styles.handles}>
                <div className={styles.status}>已取消</div>
              </div>
            </div>
          </div>
        </div>
      </div> */}
        {/* <Pagination className={styles.pagination} onChange={handlePageChange} total={total} current={currentPage} /> */}
      </Spin>
    </div>
  );
};

export default Index;
